<template>
	<view>
		<view class="lc-head-cons" :style="'height:'+headHeight+'rpx;'">
			<picker mode="region" :range="city" @change="selectCity">
				<view class="lc-address">
					<image :src="baseurl+'/imgs2/hh1.png'" mode="widthFix" class="lc-address-icon1"></image>
					<view>{{city}}</view>
					<image :src="baseurl+'/imgs2/hh2.png'" mode="widthFix" class="lc-address-icon2"></image>
				</view>
			</picker>
		</view>
		<view class="lc-search" :style="'margin-top: '+headHeight+'rpx;'" @click="goodsList">
			<image :src="baseurl+'/imgs2/hh3.png'" mode="widthFix"></image>
			<view>搜索美食</view>
		</view>
		<swiper class="swiper" circular indicator-active-color="#fff" indicator-color="rgba(255, 255, 255, .3)"
			:interval="interval" :duration="duration" :indicator-dots="indicatorDots">
			<swiper-item v-for="(item,index) in banner">
				<image :src="item.media" mode="aspectFill" @click="handleGroups"></image>
			</swiper-item>
		</swiper>
		<view class="lc-imgs">
			<image :src="baseurl+'/imgs2/hh44.png'" mode="widthFix" @click="shopList(2)" class="aimgs"></image>
			<view>
				<image :src="baseurl+'/imgs2/hh55.png'" mode="widthFix" @click="shopList(1)"></image>
				<image :src="baseurl+'/imgs2/hh66.png'" mode="widthFix" @click="companyList"></image>
			</view>
		</view>
		<view class="lc-head-title">
			<view class="lc-line"></view>
			<view class="lc-title-name">热门团购</view>
		</view>
		<view class="lc-goods-box" v-for="(item,index) in list" @click="goodsDetail(item.id)">
			<image :src="baseurl+item.thumbnail" mode="aspectFill" class="lc-goods-img">
			</image>
			<view class="lc-goods-detail">
				<view class="lc-goods-title">{{item.title}}</view>
				<view class="lc-goods-num">销量 {{item.sales}}</view>
				<view class="lc-goods-moneys">
					<image :src="baseurl+'/imgs2/hh7.png'" mode="widthFix"></image>
					<view class="lc-goods-detail-prices">
						<view class="lc-goods-current-price"><text>￥</text>{{item.price}}</view>
						<view class="lc-goods-original-price">￥{{item.market_price}}</view>
					</view>
				</view>
				<view class="lc-goods-con">
					<view class="lc-goods-add">{{item.pingfen}}分 | {{item.shopname}}</view>
					<view class="lc-goods-km">{{item.distance}}km</view>
				</view>
			</view>
		</view>
		<view class="lc-null"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				app: getApp().globalData,
				baseurl: getApp().globalData.baseurl,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				headHeight: 0,
				page: 1,
				list: [],
				lat: '',
				lng: '',
				banner: [],
				address: '定位中...',
				city: '定位中...',
				pintuan_status: 0
			}
		},
		onLoad() {
			this.headHeight = (uni.getSystemInfoSync().statusBarHeight + 45) * 2
			this.getAddress()
		},
		methods: {
			selectCity(e) {
				console.log(e.detail.value)
				this.city = e.detail.value.join('/')
				this.page = 1
				this.list = []
				this.getList()
			},
			get() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.address = res.address
						this.lat = res.latitude
						this.lng = res.longitude
						this.page = 1
						this.list = []
						this.getList()
					}
				});
			},
			getAddress() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log(res)
						uni.setStorageSync('latitude', res.latitude);
						uni.setStorageSync('longitude', res.longitude);
						this.lat = res.latitude
						this.lng = res.longitude
						const url =
							`https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=S7JBZ-THWKU-YXQV4-BRO5H-TYJB6-XAB6Z`;
						uni.request({
							url,
							success: (res) => {
								if (res.data.status === 0) {
									// 提取城市信息
									console.log(res.data)
									this.city = res.data.result.address_component.province + '/' +
										res.data.result.address_component.city + '/' + res.data
										.result.address_component.district
									this.address = res.data.result.address
									this.getList()
								} else {
									console.error("逆地理编码失败", res.data.message);
									uni.showToast({
										title: "获取城市失败",
										icon: "none"
									});
								}
							},
							fail: (err) => {
								console.error("请求失败", err);
								uni.showToast({
									title: "网络错误",
									icon: "none"
								});
							}
						});
					},
					fail(err) {
						console.error('获取位置失败：', err);
					}
				});
			},
			handleGroups() {
				if(this.pintuan_status==1){
					uni.navigateTo({
						url: '/pages/apps/groups/index'
					})
				}
			},
			getList() {
				this.app.post('/api/chef/index/index', {
					city: this.city,
					page: this.page,
					lat: this.lat,
					lng: this.lng,
				}).then(res => {
					console.log(res)
					this.banner = res.banner
					this.pintuan_status = res.pintuan_status
					this.list = this.list.concat(res.list.data)
				})
			},
			goodsList(num) {
				uni.navigateTo({
					url: '/pages/lc/goodsList/goodsList?state=' + num+'&selectcity='+this.city
				})
			},
			shopList(num) {
				uni.navigateTo({
					url: '/pages/lc/shopList/shopList?states=' + num+'&selectcity='+this.city
				})
			},
			companyList() {
				uni.navigateTo({
					url: '/pages/lc/companyList/companyList'
				})
			},
			goodsDetail(id) {
				uni.navigateTo({
					url: '/pages/lc/goodsDetail/goodsDetail?id=' + id
				})
			},
		},
		onReachBottom() {
			this.page += 1;
			this.getList();
		},
	}
</script>

<style lang="scss">
	.lc-head-cons {
		width: 100%;
		background: linear-gradient(to bottom, #E7F6C3, #F7F7F7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 89;

		.lc-address {
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;

			.lc-address-icon1 {
				width: 40rpx;
				height: 40rpx;
				margin-left: 30rpx;
			}

			view {
				// width: 200rpx;
				font-size: 30rpx;
				color: #3D3D3D;
				margin-left: 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.lc-address-icon2 {
				width: 20rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}
	}

	.lc-search {
		width: 690rpx;
		height: 70rpx;
		border-radius: 16rpx;
		background-color: #EFF0F2;
		display: flex;
		align-items: center;
		margin-left: 30rpx;

		image {
			width: 36rpx;
			height: 36rpx;
			margin-left: 23rpx;
		}

		view {
			font-size: 24rpx;
			color: #8F8F8F;
			margin-left: 15rpx;
		}
	}

	.swiper {
		width: 690rpx;
		height: 228rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;

		swiper-item {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}

	.lc-imgs {
		width: 690rpx;
		margin-left: 30rpx;

		margin-top: 28rpx;

		.aimgs {
			width: 100%;
			height: 155rpx;
			vertical-align: bottom;
		}

		view {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 28rpx;

			image {
				width: 330rpx;
				height: 174rpx;
				vertical-align: bottom;
			}
		}
	}

	.lc-head-title {
		display: flex;
		align-items: center;
		height: 102rpx;

		.lc-line {
			width: 8rpx;
			height: 34rpx;
			background-color: #84BD00;
			margin-left: 43rpx;
			border-radius: 50rpx;
		}

		.lc-title-name {
			font-size: 33rpx;
			color: #3D3D3D;
			margin-left: 17rpx;
		}
	}

	.lc-goods-box {
		width: 690rpx;
		margin-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 30rpx;

		.lc-goods-img {
			width: 220rpx;
			height: 220rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin-left: 30rpx;
		}

		.lc-goods-detail {
			width: 390rpx;
			margin-right: 30rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			height: 220rpx;

			.lc-goods-title {
				width: 100%;
				font-size: 30rpx;
				color: #3D3D3D;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.lc-goods-num {
				font-size: 24rpx;
				background-color: #F7F7F7;
				color: #666666;
				border-radius: 50rpx;
				padding: 0 20rpx;
				line-height: 40rpx;
			}

			.lc-goods-moneys {
				width: 100%;
				position: relative;

				image {
					width: 100%;
					height: 58rpx;
				}

				.lc-goods-detail-prices {
					position: absolute;
					width: 100%;
					height: 58rpx;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;

					.lc-goods-current-price {
						font-size: 36rpx;
						color: #FB4E2F;
						font-weight: bold;

						text {
							font-size: 26rpx;
						}
					}

					.lc-goods-original-price {
						font-size: 26rpx;
						color: #999999;
						margin-left: 10rpx;
						text-decoration: line-through;
					}
				}
			}

			.lc-goods-con {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.lc-goods-add {
					width: 300rpx;
					font-size: 22rpx;
					color: #999999;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.lc-goods-km {
					font-size: 22rpx;
					color: #999999;
				}
			}
		}
	}
</style>